<template>
  <div class="balance-flow">
    <my-tabs :tab-list="tabList">
      <template v-slot="{ row }">
        <li
          class="item pointer"
          :class="{ active: routePath === row.path }"
          @click="handleClickMenu(row)"
        >
          {{ row.title }}
        </li>
      </template>
    </my-tabs>
    <el-row type="flex" align="middle" justify="space-between" class="header">
      <!-- <el-row type="flex">
        <el-date-picker v-model="userScreenTimeVal" type="date" placeholder="选择日期" size="mini">
        </el-date-picker>
      </el-row> -->
      <!-- <div class="right">累计收入：<span>{{balanceTotal}}</span></div> -->
    </el-row>
    <el-table :data="tableData" size="mini" v-if="$util.isDef(tableData)">
      <el-table-column label="时间">
        <template slot-scope="scope">
          {{ scope.row.create_time | parseTime('{y}-{m}-{d} {h}:{i}') }}
        </template>
      </el-table-column>
      <el-table-column prop="num" label="金额">
        <template slot-scope="scope">
          {{ scope.row.num | formatMoney }}
        </template>
      </el-table-column>
      <el-table-column label="类型">
        <template prop="note" slot-scope="scope">
          {{ scope.row.alter_type ? '增加' : '扣除' }}
        </template>
      </el-table-column>
      <el-table-column prop="note" label="备注" width="280"></el-table-column>
      <!-- <el-table-column label="操作" width="100">
        <template slot-scope="scope">
          <el-button type="text" size="mini">删除</el-button>
        </template>
      </el-table-column> -->
    </el-table>
    <edu-pagination @handleCurrentChange="handleCurrentChange"></edu-pagination>
  </div>
</template>

<script>
import MyTabs from '../components/myTab.vue'
import EduPagination from '@/components/EduPagination'
export default {
  components: {
    MyTabs,
    EduPagination
  },
  data() {
    return {
      tabList: [
        {
          path: '/my/finance/my_balance',
          title: '我的余额'
        },
        {
          path: '/my/finance/balance_flow',
          title: '余额流水'
        }
      ],
      tableData: null,
      userScreenTimeVal: ''
    }
  },
  computed: {
    routePath() {
      return this.$route.path
    }
  },
  created() {
    this.handleUserFlow()
  },
  methods: {
    // 分页
    handleCurrentChange() {
      this.handleUserFlow()
    },
    // 获取数据
    handleUserFlow() {
      this.$api.getBalanceFlow(
        {
          page: this.$store.getters['paginate/page'],
          count: 20
        },
        res => {
          this.tableData = res.data.data
          this.$store.dispatch('paginate/setPaginate', {
            listRows: 20,
            total: res.data.total
          })
        }
      )
    },
    handleClickMenu(data) {
      this.$router.push({
        path: data.path
      })
    }
  },
  destroyed() {
    this.$store.commit('paginate/SET_PAGINATE_DEFAULT')
  }
}
</script>

<style lang="scss" scoped>
.balance-flow {
  ::v-deep .el-table thead th {
    background-color: #f6f9ff;
  }
  .header {
    margin-bottom: 16px;
    .right {
      font-size: 14px;
      color: $text-color-import;
      span {
        font-size: 16px;
        color: $text-color-price;
      }
    }
  }
}
</style>
